<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MultiDEX Admin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/admin.css">
</head>
<body>
    <!-- 管理员导航栏 -->
    <nav class="admin-navbar">
        <div class="container">
            <div class="admin-brand">
                <i class="fas fa-cog"></i>
                <span>MultiDEX Admin</span>
            </div>
            <div class="admin-controls">
                <div class="admin-user">
                    <img src="https://ui-avatars.com/api/?name=Admin+User" alt="Admin">
                    <span>admin@multidex.com</span>
                </div>
                <button class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i> <span>Logout</span>
                </button>
            </div>
        </div>
    </nav>
    
    <!-- 管理员容器 -->
    <div class="admin-container">
        <!-- 侧边栏 -->
        <div class="admin-sidebar">
            <ul class="admin-menu">
                <li class="active">
                    <a href="#dashboard">
                        <i class="fas fa-tachometer-alt"></i> <span>Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#liquidity">
                        <i class="fas fa-water"></i> <span>Liquidity</span>
                    </a>
                </li>
                <li>
                    <a href="#tokens">
                        <i class="fas fa-coins"></i> <span>Token Management</span>
                    </a>
                </li>
                <li>
                    <a href="#risk">
                        <i class="fas fa-shield-alt"></i> <span>Risk Control</span>
                    </a>
                </li>
                <li>
                    <a href="#governance">
                        <i class="fas fa-vote-yea"></i> <span>Governance</span>
                    </a>
                </li>
                <li>
                    <a href="#analytics">
                        <i class="fas fa-chart-bar"></i> <span>Analytics</span>
                    </a>
                </li>
                <li>
                    <a href="#users">
                        <i class="fas fa-users"></i> <span>User Management</span>
                    </a>
                </li>
                <li>
                    <a href="#settings">
                        <i class="fas fa-cog"></i> <span>Settings</span>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 管理内容 -->
        <div class="admin-content">
            <!-- 仪表盘页面 -->
            <div class="admin-page active" id="dashboardPage">
                <div class="admin-page-header">
                    <h1><i class="fas fa-tachometer-alt"></i> Dashboard</h1>
                    <div class="date-filter">
                        <select>
                            <option>Last 24 hours</option>
                            <option>Last 7 days</option>
                            <option>Last 30 days</option>
                            <option selected>Last 90 days</option>
                        </select>
                    </div>
                </div>
                
                <!-- 统计卡片 -->
                <div class="dashboard-stats">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">$124.5M</div>
                            <div class="stat-label">Total Value Locked (TVL)</div>
                            <div class="stat-change positive">+5.2%</div>
                        </div>
                    </div>
                    
                    <!-- 其他统计卡片 -->
                </div>
                
                <!-- 图表容器 -->
                <div class="dashboard-charts">
                    <div class="chart-container">
                        <h3>TVL by Chain</h3>
                        <canvas id="tvlChart"></canvas>
                    </div>
                    <div class="chart-container">
                        <h3>Volume Trend (7 days)</h3>
                        <canvas id="volumeChart"></canvas>
                    </div>
                </div>
                
                <!-- 网格布局 -->
                <div class="dashboard-grid">
                    <div class="grid-item">
                        <h3>Liquidity Pool Distribution</h3>
                        <canvas id="poolChart"></canvas>
                    </div>
                    <div class="grid-item">
                        <h3>User Activity</h3>
                        <div class="activity-map">
                            <!-- 活动地图内容 -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 代币管理页面 -->
            <div class="admin-page" id="tokensPage">
                <div class="admin-page-header">
                    <h1><i class="fas fa-coins"></i> Token Management</h1>
                    <button class="btn btn-primary" id="addTokenBtn">
                        <i class="fas fa-plus"></i> Add Token
                    </button>
                </div>
                
                <!-- 代币表格 -->
                <div class="token-table-container">
                    <table class="token-table">
                        <thead>
                            <tr>
                                <th>Token</th>
                                <th>Symbol</th>
                                <th>Chain</th>
                                <th>Contract</th>
                                <th>Liquidity</th>
                                <th>Volume (24h)</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 代币行 -->
                            <tr>
                                <td>
                                    <div class="token-info">
                                        <img src="https://assets.coingecko.com/coins/images/1/large/bitcoin.png" alt="BTC">
                                        <span>Bitcoin</span>
                                    </div>
                                </td>
                                <td>BTC</td>
                                <td>Ethereum</td>
                                <td class="contract">0x2260FAC...7157D</td>
                                <td>$42.5M</td>
                                <td>$18.2M</td>
                                <td><span class="status-badge active">Active</span></td>
                                <td>
                                    <button class="action-btn edit"><i class="fas fa-edit"></i></button>
                                    <button class="action-btn deactivate"><i class="fas fa-ban"></i></button>
                                </td>
                            </tr>
                            <!-- 更多代币行 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 表格页脚 -->
                <div class="table-footer">
                    <div class="table-info">
                        Showing 1 to 6 of 26 tokens
                    </div>
                    <div class="table-pagination">
                        <button class="page-btn disabled"><i class="fas fa-chevron-left"></i></button>
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">3</button>
                        <button class="page-btn">4</button>
                        <button class="page-btn"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
            </div>
            
            <!-- 风险控制页面 -->
            <div class="admin-page" id="riskPage">
                <!-- 风险控制内容 -->
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="js/admin.js"></script>
</body>
</html>